import "./Instrument.css"
import { Button, Space, Table, Switch } from "antd";
import type { TableProps } from 'antd';
import { useEffect, useState } from "react";
import InstrumentMock from "@/mock/InstrumentMock";

interface DataType {
  _id: string;
  meterNum: string; // 仪表编号
  meterName: string; // 仪表名称
  chargeItem: string; // 收费项目
  status: boolean; // 状态
  startDate: string; // 启用日期
  addPeople: string; // 添加人
  addDate: string; // 添加时间
}





export default function test() {
  const [data, setData] = useState<DataType[]>([])
  const [pagesize, setPagesize] = useState(5)

  useEffect(() => {
    setData(InstrumentMock)
  })

  const columns: TableProps<DataType>['columns'] = [
    {
      title: '仪表编号',
      dataIndex: 'meterNum',
      key: 'meterNum',
      render: (text) => <span>{text}</span>,
    },
    {
      title: '仪表名称',
      dataIndex: 'meterName',
      key: 'meterName',
      render: (text) => <span>{text}</span>
    },
    {
      title: '收费项目',
      dataIndex: 'chargeItem',
      key: 'chargeItem',
      render: (text) => <span>{text}</span>
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <span><Switch defaultValue={record.status} onChange={(checked) => onChange(checked, record._id)} /></span>
        </Space>
      ),
    },
    {
      title: '启用日期',
      dataIndex: 'startDate',
      key: 'startDate',
      render: (text) => <span>{text}</span>
    },
    {
      title: '添加人',
      dataIndex: 'addPeople',
      key: 'addPeople',
      render: (text) => <span>{text}</span>
    },
    {
      title: '添加时间',
      dataIndex: 'addDate',
      key: 'addDate',
      render: (text) => <span>{text}</span>
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => { console.log(record) }}>编辑</a>
          <a onClick={() => { console.log(record) }}>删除</a>
        </Space>
      ),
    },
  ];


  const onChange = (checked: boolean, _id: string) => {
    console.log(`Switch changed for ID: ${_id}, New State: ${checked}`);
  }

  // 选中数据的回调函数
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
  };

  return (
    <div className="Instrument">
      <div className="Instrument-header">
        <span>仪表列表</span>
        <div>
          <Button className="Instrument-header-btn" type="primary">+ 新建</Button>
          <Button className="Instrument-header-btn">批量操作</Button>
        </div>
      </div>
      <div className="Instrument-content">
        <Table<DataType>
          rowSelection={{ type: 'checkbox', onChange: onSelectChange }}
          columns={columns}
          dataSource={data}
          rowKey="_id"
          pagination={{
            position: ["bottomCenter"], // 分页器显示在底部
            pageSize: pagesize,        // 每页显示 5 条数据
            total: data.length, // 总数据条数
            showSizeChanger: true, // 允许用户改变每页显示的条数
            pageSizeOptions: [3, 5, 7, 9], // 每页显示条数的选项
            onShowSizeChange: (current, pageSize) => {  //  页码回调函数
              setPagesize(pageSize)
            }
          }} />
      </div>
    </div>
  )
}
